<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="/common/common.jspf"%>
<style type="text/css">
.col-sm-3 {
	width: 15%;
	float: left;
}
.col-sm-9 {
	width: 85%;
	float: left;
}
</style>
</head>
<body>
	<div class="l_err" style="width: 100%; margin-top: 2px;"></div>
	<form id="form" name="form" class="form-horizontal" method="post" action="${ctx}/party/saveParty.shtml" enctype="multipart/form-data">
		<section class="panel panel-default">
			<div class="panel-body">
				<div class="form-group">
					<label class="col-sm-3 control-label">活动类型</label>
					<div class="col-sm-9">
						<select class="form-control" name="partyFormMap.type">
							<c:forEach items="${dict}" var="party">
								<option value="${party.value}">${party.label}</option>
							</c:forEach>
						</select>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">活动主题</label>
					<div class="col-sm-9">
						<input type="text" class="form-control checkRole"
							placeholder="请输入活动主题" id="subject" name="partyFormMap.subject" onkeyup="addDetail()"/>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">预计规模</label>
					<div class="col-sm-9">
						<input type="text" class="form-control" id="expectPerson" placeholder="请输入预计规模"
							name="partyFormMap.expectPerson"  onkeyup="addDetail()">
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">联系人</label>
					<div class="col-sm-9">
						<input type="text" class="form-control" placeholder="请输入联系人" id="contact"
							name="partyFormMap.contact" onkeyup="addDetail()">
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">联系方式</label>
					<div class="col-sm-9">
						<input type="text" class="form-control" placeholder="请输入联系电话"
							name="partyFormMap.phone" id="phone" onkeyup="addDetail()">
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">注意事项</label>
					<div class="col-sm-9">
						<input type="text" class="form-control checkacc"
							placeholder="请输入注意事项" id="notice" name="partyFormMap.notice"  onkeyup="addDetail()">
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">参与对象</label>
					<div class="col-sm-9">
						<input type="text" class="form-control" id="attendTarget" placeholder="请输入参与对象"
							name="partyFormMap.attendTarget">
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">活动详情</label>
					<div class="col-sm-9">
						<input type="text" class="form-control" id="description" placeholder="请输入活动详情"
							name="partyFormMap.description">
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">省份</label>
					<div class="col-sm-9">
						<select class="form-control" id="province" name="partyFormMap.province" onkeyup="addDetail()"></select>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">城市</label>
					<div class="col-sm-9">
						<select class="form-control" id="city" name="partyFormMap.city"  onchange="addDetail()"></select>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">区县</label>
					<div class="col-sm-9">
						<select class="form-control" id="area" name="partyFormMap.area"  onchange="addDetail()"></select>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">街道</label>
					<div class="col-sm-9">
						<select class="form-control" id="street" name="partyFormMap.street"  onchange="addDetail()"></select>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">详细地址</label>
					<div class="col-sm-9">
						<input class="form-control" placeholder="请输入详细地址" id="address" name="partyFormMap.address" onkeyup="addDetail()">
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">开始时间</label>
					<div class="col-sm-9">
						<input class="form-control" id="beginTime" type="text" name="partyFormMap.startTime" placeholder="请选择开始时间"  onchange="addDetail()"  readonly>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">结束时间</label>
					<div class="col-sm-9">
						<input class="form-control" id="endTime" type="text" name="partyFormMap.endTime" placeholder="请选择结束时间"  onchange="addDetail()"  readonly>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">活动图片</label>
					<div class="col-sm-9">
						<input type="file" class="form-control" placeholder="请输入礼品价格"
							name="partyFormMap.partyImage" id="partyImage"  accept="image/jpeg,image/bmp,image/gif,image/jpg,image/png">
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">描述</label>
					<div class="col-sm-9">
						<textarea rows="3" class="form-control" id="detail" name="partyFormMap.detail"></textarea>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
			</div>
			<footer class="panel-footer text-right bg-light lter">
				<button type="submit" class="btn btn-success btn-s-xs" id="tj">提交</button>
			</footer> 
	</section>
	</form>
	<script type="text/javascript">
	initRegionFormControl();//初始化省市区联动
	</script>
	<script type='text/javascript'>
	
	jeDate.skin("gray")  //调用不同风格的样式  分别有 默认("jedate")、红色("red")、绿色("green")、灰色("gray")、
	jeDate({
		dateCell:"#beginTime",  //目标元素。由于jedate.js封装了一个轻量级的选择器，因此dateCell还允许你传入class、tag这种方式 '#id .class'
		format:"YYYY-MM-DD hh:mm",
		isinitVal:false, //显示时间
		isTime:true, 
	    festival: true, //显示节日
		minDate:"1990-01-01 00:00",
		choosefun:function(){
			addDetail();
		}
	});
	jeDate({
		dateCell:"#endTime",  //目标元素。由于jedate.js封装了一个轻量级的选择器，因此dateCell还允许你传入class、tag这种方式 '#id .class'
		format:"YYYY-MM-DD hh:mm",
		isinitVal:false, //显示时间
		isTime:true, 
	    festival: true, //显示节日
		minDate:"1990-01-01 00:00",
		choosefun:function(){
			addDetail();
		}
	});
	var orgName='${orgName}';
	function addDetail(){
		var detail="";
		var subject=$("#subject").val();
		var bianhao="活动编号:待生成";
		var beginTime=$("#beginTime").val();
		var endTime=$("#endTime").val();
		var province=$("#province option:selected").text();
		var city=$("#city option:selected").text();
		var area=$("#area option:selected").text();
		var street=$("#street option:selected").text();
		var address=$("#address").val();
		var contact=$("#contact").val();
		var phone=$("#phone").val();
		var notice=$("#notice").val();
		var zhubanfang=orgName;
		if(subject){
			detail+="活动主题:"+subject+"、 ";
		}
		detail+=bianhao+"、 ";
		if(beginTime){
			detail+="开始时间:"+beginTime+"、 ";
		}
		if(endTime){
			detail+="结束时间:"+endTime+"、 ";
		}
		if(beginTime!=""&&endTime!=""&&beginTime>endTime){
			layer.msg("开始时间不能大于结束时间");
			$("#tj").attr("disabled","true");
		}else{
			$("#tj").removeAttr("disabled");
		}
		if(province){
			detail+="地点:"+province+city+area+street;
		}
		if(address){
			detail+=address+"、 ";
		}else{
			detail+="、 ";
		}
		if(contact){
			detail+="联系人:"+contact+"、 ";
		}
		if(phone){
			detail+="联系方式:"+phone+"、 ";
		}
		if(notice){
			detail+="注意事项:"+notice+", ";
		}
		if(zhubanfang){
			detail+="("+zhubanfang+")感谢您的热情参与";
		}
		$("#detail").html(detail);
	}
	 $(function() {
		 $("form").validate({
	 		submitHandler : function(form) {//必须写在验证前面，否则无法ajax提交
	 			var url=$("#partyImage").val();
				url=url.toLowerCase();
				if(url.indexOf("bmp")>0||url.indexOf("jpg")>0||url.indexOf("jpeg")>0||url.indexOf("png")>0||url.indexOf("gif")>0){
					
				}else{
					layer.msg("请上传类型为bmp,jpg,jpeg,png,gif的图片文件");
					return false;
				}	
	 			ly.ajaxSubmit(form,{//验证新增是否成功
	 				type : "post",
	 				dataType:"json",
	 				success : function(data) {
	 					if (data=="success") {
	 						layer.alert("提交成功!", function(index) {
	 							parent.grid.loadData();
					        	parent.layer.close(parent.pageii);
					        	layer.close(index)
					        });
	 					} else {
	 						layer.alert('添加失败！', 3);
	 					}
	 				}
	 			});
	 		},
	 		rules : {
	 			"partyFormMap.subject" : {
					required : true
				},
				"partyFormMap.expectPerson" : {
					required : true,
					digits : true
				},
				"partyFormMap.address" : {
					required : true
				},
				"partyFormMap.contact" : {
					required : true
				},
				"partyFormMap.phone" : {
					required : true
				},
				"partyFormMap.startTime" : {
					required : true
				},
				"partyFormMap.endTime" : {
					required : true
				},
				"partyFormMap.type" : {
					required : true
				},
				"partyFormMap.description" : {
					required : true
				}
	 		},
			messages : {
				"partyFormMap.subject" : {
					required : "活动主题不能为空",
				},
				"partyFormMap.expectPerson" : {
					required : "预计规模不能为空",
					digits : "请输入正确预计规模"
				},
				"partyFormMap.address" : {
					required : "详细地址不能为空",
				},
				"partyFormMap.contact" : {
					required : "联系人不能为空",
				},
				"partyFormMap.phone" : {
					required : "联系方式不能为空",
				},
				"partyFormMap.startTime" : {
					required : "请选择活动开始时间"
				},
				"partyFormMap.endTime" : {
					required : "请选择活动结束时间"
				},
				"partyFormMap.type" : {
					required : "请选择活动类型"
				},
				"partyFormMap.description" : {
					required : "活动详情不能为空"
				}
			},
	 		errorPlacement : function(error, element) {//自定义提示错误位置
	 			$(".l_err").css('display','block');
	 			$(".l_err").html(error.html());
	 		},
	 		success: function(label) {//验证通过后
	 			$(".l_err").css('display','none');
	 		}
	 	});
	 });
	</script>
</body>
</html>